import axios from 'axios'

const request = axios.create({
    baseURL: 'https://hmajax.itheima.net/'
})

// axios拦截器
// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // console.log(config)
  const token = window.localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = token
  }
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
})

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  // 剥离一层数据，外部少点一次data
  return response.data;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  if (error.response && error.response.status === 401) {
    // 登录状态失效，删除token，重新登录
    alert('请重新登录')
    localStorage.removeItem('token')
    setTimeout(() => {
      window.location.href = '/#/login'
    }, 1000);
  }
  // 对响应错误做点什么
  return Promise.reject(error);
})

export default request

// 籍贯分布
const initMapChart = (data) => {
    const myEchart = echarts.init(document.querySelector('#map'))
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
    dataList.forEach((item) => {
      const obj = data.find((it) => it.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') === item.name)
      if (obj) item.value = obj.value
    })
    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }
  
  // 男女薪资分布
  const initSalaryPieChart = (data) => {
    const myEchart = echarts.init(document.querySelector('#gender'))
    myEchart.setOption({
      title: [
        {
          text: '男女薪资分布',
          left: 10,
          top: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        {
          text: '男生',
          left: '50%',
          top: '45%',
          textAlign: 'center',
          textStyle: {
            fontSize: 12,
          },
        },
        {
          text: '女生',
          left: '50%',
          top: '85%',
          textAlign: 'center',
          textStyle: {
            fontSize: 12,
          },
        },
      ],
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          type: 'pie',
          radius: 50,
          radius: ['20%', '30%'],
          center: ['50%', '30%'],
          datasetIndex: 1,
          // data: [{name:'1万以下',value: 4},...]
          data: data.map((item) => ({ name: item.label, value: item.b_count })),
        },
        {
          type: 'pie',
          radius: 50,
          radius: ['20%', '30%'],
          center: ['50%', '70%'],
          datasetIndex: 2,
          // data: [{name:'1万以下',value: 4},...]
          data: data.map((item) => ({ name: item.label, value: item.g_count })),
        },
      ],
    })
  }

  
  
  